• javascript的Array提供一個map函式，相信用過的人一定愛不釋手，經過一個設定，就能轉換出我們要的資料。
• 底下就是map的一個例子，我們將收到的每個值+10，之後我們就能得到一個資料為[11,12,13,14,15]的array囉!

[1,2,3,4,5].map(val=>val+10); //[11,12,13,14,15]

• 今天介紹的RxJS map就是與這樣的概念一致，趕緊來看看吧!☕

map

圖片來源 RxJS官網 - map

• map的定義:map(定義一個函式，將來源的每一筆資料，透過轉換再輸出)，很簡單吧!先來看下面的例子。

case1:map基本用法

stackblitz

import { map, from, fromEvent } from 'rxjs';

// case1: map
const obs$ = from([1, 2, 3, 4, 5]).pipe(map((val) => val + 10));
obs$.subscribe(console.log);  

//印出 11,12,13,14,15

case2:用fromEvent+map解析鍵盤輸入的資料

• 我們使用fromEvent(doucment, 'keyup')搭配map來分析我們要判定的資料。
  stackblitz

// case2: fromEvent + map
const keyCode$ = fromEvent(document, 'keyup').pipe(
  map((event: KeyboardEvent) => event.code) // 用map解析KeyboardEvent的資料，並用next傳出
);
keyCode$.subscribe(console.log);

• 經由map解析資料，取出code對應的value，就能得知我們按下什麼鍵啦!!

題外話聊聊pluck

• 剛剛透過官網才知道，pluck即將在v8版本被移除(目前我們使用RxJS-V7.5.5)，官方建議使用map就可以達到我們要的功能。

stackblitz

// case3: pluck
console.log('case3: pluck');
const keyCodePluck$ = of(
  { one: { num: 111 }, two: { num: 222 } },
  { one: { num: 123 }, two: { num: 223 } }
).pipe(
  // map((event: KeyboardEvent) => event.code)
  // pluck('one'), //<--第一層的key放第1個
  pluck('one', 'num') //<--第二層的key放第2個
);
keyCodePluck$.subscribe(console.log);

• 定義:pluck(第一層的key, 第二層的key...第N層的key)，如果你的資料是巢狀的Object，依序定義你的key就能順利地取出我們的資料囉

✍補充說明:

observer怎沒定義了?

• 眼尖的朋友應該發現我們的observer的定義拿掉了，直接在subscribe(console.log)；因為RxJS會自動地把console.log轉譯成{next:(data)=>console.log(data)}，為了方便，未來我們也會採取這樣的方式來進行。

pipe施打連續技

• pipe是observable內建的一個函釋，可以搭配RxJS內建豐富的operator；隨著我們介紹越多的operator，你就可以自由地組合出完美的連續技!
  

• 喔耶~第9天打完收工，咱們準備迎接第10天啦!!